<template>
	<view class="container-vip">
		<view class="lang-top">
			<view class="backIcon" @click="back()">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="langText">
				{{$t('修改登录密码')}}
			</view>
			<view class="clearView"></view>
		</view>
		
		<view class="item-forget-view">
			<view class="pwd-view">
				<p class="pwd-title">{{$t('设置新的登录密码')}}</p>
				<p class="pwd-phone">{{$t('已绑定的信息')}}：<span>{{user.username}}</span></p>
			</view>
			<view class="ver-code">
				<input  v-model="form.verifyCode" type="text" :placeholder="$t('请输入验证码')" class="inp1"/>
				<button  v-if="count <= 0" class="verify-btn" @click="verifyBtn">{{$t('获取验证码')}}</button>
				<button  v-else class="verify-btn2">{{count}}s</button>
			</view>
			<view class="item-forget">
				<input v-model="form.phone" type="password" :placeholder="$t('请输入新密码')" class="inp"/>
			</view>
			<view class="login-pwd">
				<input v-model="form.password" type="password" :placeholder="$t('请确认新密码')" class="inp"/>
			</view>
			<view class="login-btn" @click="revise">
				{{$t('确认修改')}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					phone:'',
					verifyCode:'',
					password:''
				},
				count:0,
				code:'',
				user:{}
			}
		},
		onShow() {
			this.getinfo()
		},
		methods:{
			revise(){
				let data = {
					password:this.form.phone,
					code:this.form.verifyCode,
					password_confirm:this.form.password,
				}
				this.$http.post(
					'api/user/user_edit_login_pwd',//接口名
					data,//参数合集
				).then(res=>{
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/my/accountSetting'
						})
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			getinfo(){
				this.$http.get(
					'api/user/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取验证码
			verifyBtn(){
					let that = this
					that.$http.post(
						'api/user/end_login_pwd_code',//接口名
						{}//参数合集
					).then(res=>{
						that.code = res.data.code
						uni.showToast({
							title: res.msg,
							icon:'success'
						});
						that.count = 60
						that.times =  setInterval(function(){
							that.countdown()
						}, 1000);
					},(err)=>{//失败的操作
						uni.showToast({
							icon: 'error',
							title: err.data.message
						});
					})
			},
			countdown() {
				if (this.count > 0) {
					// console.log(this.count)
					this.count--;
				}else{
					//清除定时器
					clearInterval(this.times)
					//将验证码填充回验证码输入框
					this.form.verifyCode = this.code
				}
			},
		}
	}
</script>

<style scoped>
	.pwd-title{
		height: 25px;
		line-height: 25px;
		font-size: 18px;
		color: #000;
		font-weight: 400;
	}
	.pwd-phone{
		margin-top: 23px;
		color: #000;
		font-size: 14px;
		font-weight: 400;
	}
	.login-btn{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		width: 90%;
		background: linear-gradient(90deg, #e4392e, #ff4d16);
		border-radius: 46rpx;
		color: #fff;
		text-align: center;
		margin: 78rpx auto 0 auto;
	}
	.item-forget-view{
		width: 96%;
		margin: 0 auto;
		/* padding: 35px 20px 0 20px; */
	}
	.item-forget{
		display: flex;
		width: 100%;
		align-items: center;
		margin-bottom: 49rpx;
	}
	.inp{
		flex: 1 1 auto;
		border-radius: 5px;
		border: 1px solid #eee;
		font-size: 28rpx;
		height: 92rpx;
		padding: 0 20rpx;
		background: #fff;
	}
	.item-forget-view{
		width: 96%;
		margin: 0 auto;
		padding-top: 56rpx;
	}
	.login-pwd{
		margin-bottom:40rpx;
	}
	.ver-code{
		display: flex;
		margin:40rpx 0;
	}
	.inp1{
		flex: 1 1 auto;
		border-radius: 5px;
		border: 1px solid #eee;
		font-size: 28rpx;
		height: 92rpx;
		padding: 0 20rpx;
		background: #fff;
		
	}
	.verify-btn{
			flex: 0 0 40%;
		    margin-left: 20rpx;
		    font-size: 32rpx;
		    text-align: center;
		    line-height: 90rpx;
		    color: #fff;
		    height: 90rpx;
		    background: linear-gradient(90deg, #e4392e, #ff4d16);
		    border-radius: 8px;
	}
	.verify-btn2{
			flex: 0 0 40%;
		    margin-left: 20rpx;
		    font-size: 32rpx;
		    text-align: center;
		    line-height: 90rpx;
		    color: #fff;
		    height: 90rpx;
		    background: linear-gradient(90deg, #ccc, #ccc);
		    border-radius: 8px;
	}
	.container-vip{
		background-color: #f6f6f6;
	}
	.lang-top{
		display: flex;
		padding-left:10rpx;
		height:88rpx;
		line-height:88rpx;
		background-color: #fff;
	}
	.backIcon{
		width:20%;
	}
	.langText{
		font-size:36rpx;
		width:60%;
		text-align: center;
		
	}
	.clearView{
		width:20%;
	}
	.content-view{
		background: #fff;
		padding: 10rpx;
		margin: 0 auto;
		font-size:24rpx;
		
	}
	.content-view>p{
		line-height:40rpx;
	}
</style>